<template>
  <div class="tab-bar-container">
    <div class="tab-bar">
      <button
        v-for="tab in tabs"
        :key="tab.id"
        @click="setCurrentTab(tab.id)"
        :class="{ active: currentTab === tab.id }"
        class="tab-button"
      >
        <font-awesome-icon :icon="tab.icon" class="tab-icon" />
        <span class="tab-label">{{ tab.label }}</span>
      </button>
    </div>
  </div>
</template>

<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useAppStore } from "@/store/modules/app";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import {
  faComments,
  faCommentDots,
  faCompass,
  faUser,
} from "@fortawesome/free-solid-svg-icons";

const appStore = useAppStore();
const router = useRouter();
const route = useRoute();

// 标签页配置 - 包含Font Awesome图标
const tabs = [
  { id: "session", label: "会话", icon: faComments },
  { id: "chat", label: "聊天", icon: faCommentDots },
  { id: "discover", label: "发现", icon: faCompass },
  { id: "profile", label: "我的", icon: faUser },
];

// 当前活动标签页 (从路由推断)
const currentTab = computed(() => {
  return route.path.split("/").pop() || "session";
});

// 设置当前标签页
const setCurrentTab = (tabId) => {
  // 更新应用状态
  appStore.changeTab(tabId);

  // 导航到对应路由
  router.push(`/main/${tabId}`);
};
</script>

<style scoped>
.tab-bar-container {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  background-color: white;
}

.tab-bar {
  display: flex;
  max-width: 500px;
  margin: 0 auto;
}

.tab-button {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  border: none;
  background: none;
  cursor: pointer;
  transition: all 0.3s ease;
  color: #888;
  position: relative;
}

.tab-button:hover {
  background-color: #f8f9fa;
}

.tab-button.active {
  color: #1890ff;
}

.tab-button.active::after {
  content: "";
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #1890ff;
}

.tab-icon {
  font-size: 20px;
  transition: transform 0.3s ease;
}

.tab-button.active .tab-icon {
  transform: translateY(-3px);
}

.tab-label {
  font-size: 12px;
  margin-top: 4px;
  letter-spacing: 0.5px;
}

@media (max-width: 480px) {
  .tab-label {
    font-size: 11px;
  }

  .tab-icon {
    font-size: 18px;
  }

  .tab-button {
    padding: 8px 0;
  }
}
</style>
